<template>
  <el-dialog @close="dialogClose"
             :visible.sync="visible">
    <div id="map-container">

    </div>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="chooseLatLng"
                 type="primary">保 存</el-button>
      <el-button @click="dialogClose">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      projectInfo: {},
      latLng: {}
    }
  },
  methods: {
    dialogClose () {
      this.$emit('update:dialogVisible', false)
    },
    // 渲染百度地图
    renderMap () {
      this.$nextTick(() => {
        let map = new BMap.Map('map-container')
        map.centerAndZoom(new BMap.Point(120.01612589259, 30.28929432287), 12)
        map.enableScrollWheelZoom()
        map.addEventListener('click', (e) => {
          map.clearOverlays()
          let point = new BMap.Point(e.point.lng, e.point.lat)
          let marker = new BMap.Marker(point)
          map.addOverlay(marker)
          this.latLng = e.point
          console.log(e.point)
        })
      })
    },
    // 确定选择经纬度
    chooseLatLng () {
      this.projectInfo.lon = this.latLng.lng
      this.projectInfo.lat = this.latLng.lat
      this.projectInfo.lonlat = this.projectInfo.lon + '-' + this.projectInfo.lat
      this.$emit('update:mapLngLat', this.projectInfo)
      this.dialogClose()
    }
  },
  watch: {
    dialogVisible (newval, oldval) {
      this.visible = newval
      if (this.visible) {
        this.renderMap()
      }
    },
    mapLngLat: {
      handler (newval, oldval) {
        this.projectInfo = JSON.parse(JSON.stringify(newval))
      },
      deep: true
    }
  },
  props: {
    dialogVisible: Boolean,
    mapLngLat: Object
  },

  created () {

  },
  mounted () {
    setTimeout(() => {

    }, 1000)
  }

}
</script>
<style scoped lang='scss'>
#map-container {
  width: 100%;
  height: 400px;
}
</style>
